<template>
  <div class="container">
    <div class="header">QQ红包</div>

    <div class="type-selector">
      <div 
        v-for="type in types"
        :key="type"
        class="type-item"
        :class="{ active: selectedType === type }"
        @click="selectedType = type"
      >
        {{ type }}
      </div>
    </div>

    <div class="input-section">
      <div class="input-row">
        <div class="input-label">个数</div>
        <input 
          type="number" 
          placeholder="填写个数"
          v-model.number="quantity"
        >
        <div class="unit">个</div>
      </div>

      <div class="input-row">
        <div class="input-label">总金额</div>
        <input 
          type="number" 
          placeholder="0.00"
          v-model.number="totalAmount"
        >
        <div class="unit">元</div>
      </div>

      <div class="input-row">
        <div class="input-wrapper">
          <input style="width: 100%; text-align: left;"
            type="text"
            placeholder="大吉大利"
            v-model="blessingMessage"
          >
        </div>
      </div>
    </div>

    <div class="blessing">{{ formattedAmount }}</div>
    <button
      class="submit-btn"
      :class="{ active: isValid }"
      :disabled="!isValid"
      @click="submitRedPacket"
    >
      塞 钱 进 红 包
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const types = ref(['拼手气', '普通'])
const selectedType = ref('拼手气')
const quantity = ref(null)
const totalAmount = ref(null)
const blessingMessage = ref('')

const isValid = computed(() => {
  return quantity.value > 0 && totalAmount.value > 0
})

const formattedAmount = computed(() => {
  return `￥${totalAmount.value?.toFixed(2) || '0.00'}`
})

const submitRedPacket = () => {
  if (isValid.value) {
    // 这里可以添加提交逻辑
    router.push({name: "Index2"})
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, sans-serif;
}

body {
  background: #f3f2f7;
}

#app {
  background: #f3f2f7;
}

.status-bar {
  padding: 12px 15px;
  color: #666666;
  font-size: 14px;
  background: #FFFFFF;
}

.header {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  background: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
}

.type-selector {
  display: flex;
  padding: 20px 15px;
  background: #f3f2f7;
}

.type-item {
  text-align: center;
  margin: 0 8px;
  font-size: 16px;
  transition: all 0.3s;
  width: 15%;
  height: 1.8rem;
  cursor: pointer;
}

.type-item.active {
  font-weight: 500;
  border-bottom: 3px solid #f7584b;
}

.input-section {
  margin: 15px;
}

.input-row {
  display: flex;
  align-items: center;
  margin: 20px 0;
  background: #FFFFFF;
  border-radius: 4px;
  line-height: 60px;
}

.input-label {
  width: 80px;
  color: #333333;
  font-size: 16px;
  padding-left: 1rem;
  font-weight: bold;
}

input {
  flex: 1;
  padding: 12px;
  border: 0px solid #DDDDDD;
  border-radius: 4px;
  font-size: 16px;
  text-align: right;
}

.input-wrapper {
  position: relative;
  flex: 1;
}

.currency-symbol {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #333333;
}

.blessing {
  text-align: center;
  font-size: 54px;
  font-weight: bold;
  color: black;
  margin: 20px 0;
}

.submit-btn {
  width: 50%;
  padding: 15px;
  margin: 30px auto;
  display: block;
  background: #d5d5d5;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 30px;
  border: none;
  cursor: not-allowed;
  transition: background 0.3s;
}

.submit-btn.active {
  background: #f7584b;
  cursor: pointer;
}

.unit {
  margin-right: 15px;;
}
</style>